<template>
  <div>
    <!-- 首页轮播图结构 -->
    <Carousel />
    <!-- 首页搜索医院的表单区域 -->
    <Search />
    <!-- 展示医院的结构 -->
    <!-- gutter：让两列直接留点距离 -->
    <el-row :gutter="20">
      <el-col :span="20">
        <!-- 医院等级子组件 -->
        <Level @getLevel="getLevel" />
        <!-- 医院地区子组件 -->
        <Region @getRegion="getRegion" />
        <!-- 医院卡片子组件 -->
        <div
          class="hospotical"
          v-if="hasHospitalArr.length > 0"
        >
          <!-- shadow：卡片阴影显示时机，默认是always即一直显示 -->
          <Card
            class="item"
            v-for="(item, index) in hasHospitalArr"
            :key="index"
            :hospitalInfo=item
          />
        </div>
        <div v-else>
          <el-empty description="暂无数据" />
        </div>
        <!-- 分页器 -->
        <div class="demo-pagination-block">
          <el-pagination
            v-model:current-page="pageNo"
            v-model:page-size="pageSize"
            :page-sizes="[10, 20, 30, 40]"
            :background=true
            layout="prev, pager, next, jumper,->, sizes, total"
            :total="total"
            @current-change="currentChange"
            @size-change="sizeChange"
          />
        </div>
      </el-col>
      <el-col :span="4">
        <Tip />
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
// 引入组合式API函数
import { onMounted, ref } from 'vue'
import { reqHospital } from '@/api/home'
// 引入首页轮播图组件
import Carousel from './carousel/index.vue'
// 引入首页搜索医院表单组件
import Search from './search/index.vue'
// 引入首页等级的组件
import Level from './level/index.vue'
// 引入首页地区组件
import Region from './region/index.vue'
// 引入展示医院的卡片组件
import Card from './card/index.vue'
// 引入右侧组件
import Tip from './tip/index.vue'
// 引入定义好的ts类型
import type { Content, HospitalResponseData } from '@/api/home/type'
// 分页器需要的数据
// 分页器页码
let pageNo = ref<number>(1)
// 一页展示几条数据
let pageSize = ref<number>(10)

// 存储已有的医院的数据
let hasHospitalArr = ref<Content>([])
// 存储已有医院的总个数
let total = ref<number>(0)
// 存储医院的等级相应数据
let hostype = ref<string>('')
// 存储医院的地区
let districtCode = ref<string>('')
// 组件挂载完毕
onMounted(() => {
  getHospitalInfo()
})
// 获取已有的医院数据
const getHospitalInfo = async () => {
  // 获取医院的数据：默认第一页，一页十个
  let result: HospitalResponseData = await reqHospital(pageNo.value, pageSize.value, hostype.value, districtCode.value);
  if (result.code === 200) {
    // 存储已有的医院的数据
    hasHospitalArr.value = result.data.content;
    // 存储医院的总个数
    total.value = result.data.totalElements;
  }
}
// 分页器页码发生变化时候触发
const currentChange = () => {
  // 再次发送请求获取医院的数据
  getHospitalInfo()
}
// 分页器下拉菜单发生变化时会触发
const sizeChange = () => {
  // 当前页码归第一页
  pageNo.value = 1
  // 再次发送请求获取医院的数据
  getHospitalInfo()
}
// 子组件的自定义事件：获取子组件给父组件传递过来的等级参数
const getLevel = (level: string) => {
  // console.log(level);
  // 收集等级参数
  hostype.value = level;
  // 再次发送请求
  getHospitalInfo();
}
// 子组件的自定义事件：获取子组件给父组件传递过来的地区参数
const getRegion = (region: string) => {
  // 存储地区的参数
  districtCode.value = region;
  getHospitalInfo();
}
</script>
<script lang="ts">
export default {
  name: 'Home'
}
</script>

<style scoped lang="scss">
.hospotical {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;

  .item {
    width: 48%;
    margin-top: 20px;
  }
}

.demo-pagination-block {
  margin-top: 10px;
}
</style>